<template>
    <div class="section">
        <el-row>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="预存管理" name="first">
                    <el-row>
                        <el-col :span="12">
                            <div class="offset">
                                老人信息
                            </div>
                            <div class="offset">
                                <el-input style="width: 200px;margin-top:20px" placeholder="请选择老人"
                                    @click.native="dialogTableVisible = true"></el-input>
                                <el-descriptions class="margin-top" :column="2" border
                                    style="width: 70%;margin-top:10px">
                                    <el-descriptions-item>
                                        <template slot="label">
                                            档案编号
                                        </template>
                                        <div>
                                            {{ this.selectedUser.userNum }}
                                        </div>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            姓名
                                        </template>
                                        {{ this.selectedUser.name }}
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            性别
                                        </template>
                                        <div></div>
                                        <div v-if="this.selectedUser.gender === 1" style="font-size:15px;">男</div>
                                        <div v-if="this.selectedUser.gender === 0" style="font-size:15px;">女</div>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            年龄
                                        </template>
                                        {{ this.selectedUser.age }}
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            护理级别
                                        </template>
                                        {{ this.selectedUser.nursingName }}
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            入院区域
                                        </template>
                                        {{ this.selectedUser.areaNum }}
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            房间号
                                        </template>
                                        {{ this.selectedUser.roomnum }}
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            床位号
                                        </template>
                                        {{ this.selectedUser.number }}
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            入院状态
                                        </template>
                                        <template v-if="selectedUser.status === 1">
                                            <span class="blue-circle"></span>
                                        </template>
                                        <template v-else-if="selectedUser.status === 4">
                                            <span class="red-circle"></span>
                                        </template>
                                        {{ displayStatus(selectedUser.status) }}
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            入院时间
                                        </template>
                                        {{ this.selectedUser && this.selectedUser.inTime ? new
                Date(this.selectedUser.inTime).toLocaleDateString() : '' }}
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            入院时长
                                        </template>
                                        {{ this.selectedUser && this.selectedUser.inTime ? calculateDays(new Date(), new
                Date(this.selectedUser.inTime)) :
                '' }}
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            住院余额
                                        </template>
                                        {{ this.selectedUser && this.selectedUser.resultMoney ?
                "￥" + this.selectedUser.resultMoney : '' }}
                                    </el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="offset">
                                预存区
                            </div>
                            <div class="offset">
                                <el-input v-model="selectedAmount" style="margin-top: 20px;width:200px"
                                    placeholder="￥请输入预存的金额"></el-input>
                            </div>
                            <div class="offset" style="font-size: 12px;">
                                快捷金额
                            </div>
                            <div class="offset">
                                <el-row>
                                    <el-button @click="selectAmount(100)"
                                        style="width: 90px;height:60px;font-size: 20px">100</el-button>
                                    <el-button @click="selectAmount(300)"
                                        style="width: 90px;height:60px;font-size: 20px">300</el-button>
                                    <el-button @click="selectAmount(500)"
                                        style="width: 90px;height:60px;font-size: 20px">500</el-button>
                                </el-row>
                                <el-row style="margin-top: 10px;">
                                    <el-button @click="selectAmount(1000)"
                                        style="width: 90px;height:60px;font-size: 20px">1000</el-button>
                                    <el-button @click="selectAmount(3000)"
                                        style="width: 90px;height:60px;font-size: 20px">3000</el-button>
                                    <el-button @click="selectAmount(5000)"
                                        style="width: 90px;height:60px;font-size: 20px">5000</el-button>
                                </el-row>
                            </div>
                            <div class="offset">
                                <el-button style="margin-top:10px;width:290px" type="primary"
                                    @click="confirm">确认预存</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="预存记录">
                    <div class="offset">
                        <el-form :inline="true">
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="订单编号">
                                        <el-input v-model="orderParam.orderNum" style="width: 200px;"
                                            placeholder="请输入"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="启用状态">
                                        <el-select v-model="orderParam.status" placeholder="请选择">
                                            <el-option label="已支付" value="1"></el-option>
                                            <el-option label="待支付" value="2"></el-option>
                                            <el-option label="订单取消" value="3"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-button type="primary" @click="queryUser">查询</el-button>
                                <el-button type="primary" @click="clear">重置</el-button>
                            </el-row>
                            
                        </el-form>
                        <el-row style="margin-top: 20px;">
                            <el-table :data="tableData1">
                                <el-table-column property="userNum" label="档案编号" width="150px"></el-table-column>
                                <el-table-column property="name" label="老人姓名" width="80px"></el-table-column>
                                <el-table-column property="saveMoney" label="预存金额" width="100px"></el-table-column>
                                <el-table-column property="totalMoney" label="住院余额" width="100px"></el-table-column>
                                <el-table-column property="orderNum" label="订单编号" width="200px"></el-table-column>
                                <el-table-column property="status" label="订单状态" width="80px">
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.status === '1'" style="color: green;">已支付</div>
                                        <div v-else-if="scope.row.status === '2'" style="color:orange;">待支付</div>
                                        <div v-else-if="scope.row.status === '3'" style="color:grey;">已退单</div>
                                    </template>
                                </el-table-column>
                                <el-table-column property="createTime" label="下单时间"></el-table-column>
                                <el-table-column property="lapseTime" label="退单时间"></el-table-column>
                                <el-table-column fixed="right" label="操作">
                                    <template slot-scope="scope">
                                        <el-button v-if="scope.row.status === '2'" type="primary" size="small"
                                            @click="goPay(scope.row)">去支付</el-button>
                                        <el-button v-if="scope.row.status === '2'" type="info" size="small"
                                            @click="cancel(scope.row.orderNum)">取消订单</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination background :page-sizes="[3, 5, 10, 20]" :page-size="pageSize1"
                                :current-page="pageNum1" layout="total, sizes, prev, pager, next"
                                @next-click="nextPage1" @prev-click="prevPage1" @size-change="sizeChange1"
                                @current-change="currentPage1" :total="total1"></el-pagination>
                        </el-row>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-row>
        <el-dialog title="选择老人" :visible.sync="dialogTableVisible">
            <el-input v-model="name" placeholder="请输入老人姓名" style="width:200px" @input="search"></el-input>
            <el-table :data="tableData" row-key="userNum">
                <el-table-column property="userNum" label="档案编号" width="150px"></el-table-column>
                <el-table-column property="name" label="姓名" width="80px"></el-table-column>
                <el-table-column property="gender" label="性别" width="80px">
                    <template slot-scope="scope">
                        <div v-if="scope.row.gender === 1" style="font-size:15px;">男</div>
                        <div v-else>女</div>
                    </template>
                </el-table-column>
                <el-table-column property="resultMoney" label="住院余额" width="100px"></el-table-column>
                <el-table-column property="inTime" label="入院时间"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="choose(scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background :page-sizes="[3, 5, 10, 20]" :page-size="pageSize" :current-page="pageNum"
                layout="total, sizes, prev, pager, next" @next-click="nextPage" @prev-click="prevPage"
                @size-change="sizeChange" @current-change="currentPage" :total="total"></el-pagination>
        </el-dialog>
        <el-dialog title="确认支付" :visible.sync="putawayVisible" style="width: 1200px;margin: 15vh auto;">
            <el-row>
                <div class="info">
                    <div class="line"></div>
                    <div class="text">订单详情</div>
                </div>
            </el-row>
            <el-descriptions class="margin-top" :column="1" style="margin-top: 10px;">
                <el-descriptions-item>
                    <template slot="label">
                        预存金额
                    </template>
                    {{ this.saveMoney.saveMoney }}
                </el-descriptions-item><br>
                <el-descriptions-item>
                    <template slot="label">
                        下单时间
                    </template>
                    {{ formattedCreateTime }}
                </el-descriptions-item><br>
                <el-descriptions-item>
                    <template slot="label">
                        订单编号
                    </template>
                    {{ this.saveMoney.orderNum }}
                </el-descriptions-item>
            </el-descriptions>
            <el-row style="margin-top: 10px;">
                <div class="info">
                    <div class="line"></div>
                    <div class="text">支付方式</div>
                </div>
            </el-row>
            <el-row>
                <el-button style="margin-top: 10px;" type="primary" @click="pay">微信支付</el-button>
            </el-row>
            <el-row style="margin-top: 15px; justify-content: center;">
                <div v-if="countDownTime > 0">
                    <span>请在</span>
                    <span style="color:red">{{ formatCountDownTime }}</span>
                    <span>后完成支付</span>
                </div>
                <div v-else>
                    <span>倒计时结束</span>
                </div>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: '',
            pageNum: 1,
            pageSize: 5,
            total: 0,
            pageNum1: 1,
            pageSize1: 5,
            total1: 0,
            activeName: 'first',
            dialogTableVisible: false,
            putawayVisible: false,
            tableData: [],
            tableData1: [],
            selectedUser: {},
            selectedAmount: '',
            orderParam: {
                orderNum: '',
                status: ''
            },
            saveMoney: {

            },
            orderNum: '',
            countDownTime: 300,
            interval: null,
        }
    },
    methods: {
        prevPage(val) {
            //点击上一页触发
            this.pageNum = val;
            this.queryUser();
        },
        nextPage(val) {
            //点击下一页触发
            this.pageNum = val;
            this.queryUser();
        },
        sizeChange(val) {
            //val每一页条数
            this.pageNum = 1;
            this.pageSize = val;
            this.queryUser();
        },
        currentPage(val) {
            this.pageNum = val;
            this.queryUser();
        },
        queryCondition() {
            this.pageNum = 1;
            this.queryUser();
        },
        //分页2
        prevPage1(val) {
            //点击上一页触发
            this.pageNum1 = val;
            this.queryAllSaveMoney();
        },
        nextPage1(val) {
            //点击下一页触发
            this.pageNum1 = val;
            this.queryAllSaveMoney();
        },
        sizeChange1(val) {
            //val每一页条数
            this.pageNum1 = 1;
            this.pageSize1 = val;
            this.queryAllSaveMoney();
        },
        currentPage1(val) {
            this.pageNum1 = val;
            this.queryAllSaveMoney();
        },
        queryCondition1() {
            this.pageNum1 = 1;
            this.queryAllSaveMoney();
        },
        queryUser() {
            let pageParam = {};
            let pp = {};
            pageParam.pageNum = this.pageNum;
            pageParam.pageSize = this.pageSize;
            pp.status = 1;
            pageParam.param= pp;
            this.$axios.post("api/user/queryUser", pageParam).then(res => {
                if (res.data.code == 200) {
                    let pageData = res.data.data;
                    this.tableData = pageData.list;
                    //给分页参数赋值
                    this.total = pageData.total;
                    this.pageNum = pageData.pageNum;
                    this.pageSize = pageData.pageSize;
                } else {
                    this.$router.push({ path: "/login" });
                }
            });
        },
        clear(){
            this.orderParam={}
        },
        search() {
            if (!this.originalData) {
                this.originalData = [...this.tableData];
            }
            if (this.name) {
                // 使用过滤器搜索匹配老人姓名
                this.tableData = this.originalData.filter(item => item.name.includes(this.name));
            } else {
                // 如果搜索框为空，则恢复原始数据
                this.tableData = [...this.originalData];
            }
        },
        choose(row) {
            this.selectedUser = row;
            this.dialogTableVisible = false;
            console.log(this.selectedUser);
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        selectAmount(amount) {
            this.selectedAmount = amount.toString(); // 转换成字符串形式
        },
        calculateDays(date1, date2) {
            const diffTime = Math.abs(date2 - date1);
            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

            if (diffDays < 30) {
                return diffDays + ' 天';
            } else if (diffDays < 365) {
                return Math.floor(diffDays / 30) + ' 个月';
            } else {
                return Math.floor(diffDays / 365) + ' 年';
            }
        },
        displayStatus(statusCode) {
            switch (statusCode) {
                case 1:
                    return '在院中';
                case 3:
                    return '外出中';
                case 4:
                    return '已出院';
            }
        },
        confirm() {
            if (!this.selectedUser.name) {
                this.$message({
                    type: 'error',
                    message: '请选择老人!'
                });
                return; // 返回，不继续执行下面的逻辑
            }
            if (!this.selectedAmount) {
                this.$message({
                    type: 'error',
                    message: '请选择金额!'
                });
                return; // 返回，不继续执行下面的逻辑
            }

            let param = {};
            param.user = this.selectedUser;
            param.money = this.selectedAmount;
            this.$axios.post('api/saveMoney/addSaveMoneyItem', param)
                .then(res => {
                    if (res.data.code === 200) {
                        this.saveMoney = res.data.data
                        this.putawayVisible = true;
                        console.log(this.saveMoney)
                        this.startCountDown();
                    }
                })
        },
        queryAllSaveMoney() {
            let pageParam = {};
            pageParam.pageNum = this.pageNum1;
            pageParam.pageSize = this.pageSize1;
            pageParam.param = this.orderParam;
            this.$axios.post("api/saveMoney/queryAllSaveMoney", pageParam).then(res => {
                if (res.data.code == 200) {
                    let pageData = res.data.data;
                    this.tableData1 = pageData.list;
                    //给分页参数赋值
                    this.total1 = pageData.total;
                    this.pageNum1 = pageData.pageNum;
                    this.pageSize1 = pageData.pageSize;
                } else {
                    this.$router.push({ path: "/login" });
                }
            });
        },
        startCountDown() {
            // 清除现有的定时器，以防止重复
            if (this.interval) {
                clearInterval(this.interval);
            }
            // 重置倒计时时间为 300 秒
            this.countDownTime = 300;
            // 设置新的定时器，每秒减少倒计时时间
            this.interval = setInterval(() => {
                if (this.countDownTime > 0) {
                    this.countDownTime -= 1;
                } else {
                    // 倒计时结束时的逻辑，这里可以关闭对话框或执行其他操作
                    clearInterval(this.interval);
                    this.putawayVisible = false; // 关闭对话框
                }
            }, 1000);
        },
        pay() {
            let param = {};
            param.user = this.selectedUser;
            param.orderNum = this.saveMoney.orderNum;
            param.money = this.selectedAmount;
            this.$message({
                type: 'info',
                message: '支付处理中，请稍候...'
            });
            setTimeout(() => {
                this.$axios.post('api/saveMoney/updateStatus', param)
                    .then(res => {
                        if (res.data.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '预存成功'
                            });
                            this.putawayVisible = false;
                            this.queryAllSaveMoney();
                            this.queryUser();
                            this.selectedUser = {}
                        }
                    })
            }, 3000)   //设置延迟时间为3秒
        },
        goPay(row) {
            let param = {};
            param.user = row;
            param.orderNum = row.orderNum;
            param.money = row.saveMoney;
            this.$axios.post('api/saveMoney/updateStatus', param)
                .then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '预存成功'
                        });
                        this.putawayVisible = false;
                        this.queryAllSaveMoney();
                        this.queryUser();
                        this.selectedUser = {}
                    }
                })
        },
        cancel(val) {
            this.$axios.get("api/saveMoney/updateSaveMoneyStatus/" + val)
                .then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '取消成功'
                        });
                        this.queryAllSaveMoney();
                    }
                })
        },


    },
    created() {
        this.queryUser()
        this.queryAllSaveMoney()
    },
    computed: {
        formattedCreateTime() {
            if (!this.saveMoney || !this.saveMoney.createTime) return '';
            const date = new Date(this.saveMoney.createTime);
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            const hours = date.getHours().toString().padStart(2, '0');
            const minutes = date.getMinutes().toString().padStart(2, '0');
            const seconds = date.getSeconds().toString().padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        formatCountDownTime() {
            let minutes = Math.floor(this.countDownTime / 60);
            let seconds = this.countDownTime % 60;
            // 格式化为分:秒的形式
            return `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
        },
    },

}
</script>

<style scoped>
.section {
    width: 1300px;
    height: 600px;
    background-color: white;
    margin-left: 20px;
    margin-top: 25px;
}

.section1 {
    width: 350px;
    height: 800px;
    background-color: white;
    margin-left: 50px;
    margin-top: 25px;
}

.offset {
    margin-top: 15px;
    margin-left: 15px;
}

.offset1 {
    margin-top: 15px;
    margin-left: 15px;
}

.offset2 {
    margin-top: 50px;

}

.align-right {
    display: flex;
    justify-content: flex-end;
}

.blue-circle,
.yellow-circle,
.red-circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}

.blue-circle {
    background-color: blue;
}

.red-circle {
    background-color: red;
}

.line {
    width: 3px;
    /* 改变线的宽度 */
    height: 20px;
    /* 改变线的高度 */
    background-color: rgb(0, 174, 255);
    /* 改变线的颜色 */
    margin-right: 8px;
}

.info {
    display: flex;
    align-items: center;
}

.text {
    color: rgb(0, 174, 255);
}
</style>